<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目回收站 | YOLO Vision AI Platform</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                        'hover': '0 4px 12px rgba(22, 93, 255, 0.15)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .hover-scale {
                @apply hover:scale-[1.02] transition-all-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark overflow-hidden h-screen flex flex-col">
    <div class="flex flex-1 overflow-hidden">
        <!-- 主内容区域 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
            <!-- 面包屑导航 -->
            <nav class="flex mb-6 text-sm" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="home.html" class="inline-flex items-center text-dark-2 hover:text-primary">
                            <i class="fa fa-home mr-2"></i>
                            首页
                        </a>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fa fa-angle-right text-dark-2 mx-2"></i>
                            <span class="text-dark font-medium">项目回收站</span>
                        </div>
                    </li>
                </ol>
            </nav>
            
            <!-- 页面标题和操作区 -->
            <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">项目回收站</h2>
                    <p class="text-dark-2 mt-1">已删除的项目将在此保留30天，之后将被永久删除</p>
                </div>
                
                <div class="flex flex-wrap gap-3">
                    <button id="empty-recycle-btn" class="bg-white text-danger border border-danger px-4 py-2 rounded-lg hover:bg-danger/5 transition-all-300 font-medium flex items-center">
                        <i class="fa fa-trash mr-2"></i> 清空回收站
                    </button>
                    <div class="relative">
                        <input type="text" placeholder="搜索已删除项目..." class="pl-10 pr-4 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full md:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
                    </div>
                </div>
            </div>
            
            <!-- 回收站状态信息卡片 -->
            <div class="bg-white rounded-xl shadow-card p-6 mb-6 border-l-4 border-warning">
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div class="flex items-start space-x-3 mb-4 md:mb-0">
                        <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-info-circle text-warning text-lg"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-dark mb-1">回收站信息</h3>
                            <p class="text-dark-2 text-sm">当前回收站中有 <span class="text-warning font-medium">8</span> 个已删除项目，占用存储空间 <span class="text-warning font-medium">5.6GB</span></p>
                        </div>
                    </div>
                    <div class="flex space-x-3">
                        <button class="text-sm text-dark-2 hover:text-primary transition-all-300">
                            回收站帮助 <i class="fa fa-external-link ml-1 text-xs"></i>
                        </button>
                        <button class="text-sm text-primary hover:underline transition-all-300">
                            管理存储策略
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 搜索和筛选条件 -->
            <div class="bg-white rounded-xl shadow-card p-6 mb-6">
                <div class="flex flex-wrap gap-4">
                    <div class="flex-1 min-w-[200px]">
                        <label class="block text-sm font-medium text-dark-2 mb-1.5">删除时间范围</label>
                        <div class="flex border border-light-2 rounded-lg overflow-hidden">
                            <input type="date" class="flex-1 px-3 py-2 focus:outline-none focus:ring-0">
                            <span class="px-3 py-2 text-dark-2 flex items-center">至</span>
                            <input type="date" class="flex-1 px-3 py-2 focus:outline-none focus:ring-0">
                        </div>
                    </div>
                    <div class="min-w-[180px]">
                        <label class="block text-sm font-medium text-dark-2 mb-1.5">项目类型</label>
                        <select class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all">全部类型</option>
                            <option value="detection">目标检测</option>
                            <option value="classification">图像分类</option>
                            <option value="segmentation">语义分割</option>
                            <option value="instance-segmentation">实例分割</option>
                        </select>
                    </div>
                    <div class="min-w-[180px]">
                        <label class="block text-sm font-medium text-dark-2 mb-1.5">删除方式</label>
                        <select class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all">全部方式</option>
                            <option value="self">本人删除</option>
                            <option value="admin">管理员删除</option>
                            <option value="system">系统自动删除</option>
                        </select>
                    </div>
                    <div class="min-w-[140px] flex items-end">
                        <div class="flex gap-2">
                            <button class="px-4 py-2 bg-white border border-light-2 rounded-lg hover:bg-light-1 transition-all-300 font-medium text-sm">
                                重置
                            </button>
                            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300 font-medium text-sm">
                                筛选
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 项目列表 -->
            <div class="bg-white rounded-xl shadow-card mb-6">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-light-2">
                        <thead class="bg-light-1">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="select-all" class="h-4 w-4 text-primary border-light-3 rounded focus:ring-primary">
                                        <label for="select-all" class="sr-only">全选</label>
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">项目名称</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">项目类型</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">创建者</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">删除人</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">删除时间</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">存储大小</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">状态</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-dark-2 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-light-2">
                            <!-- 项目1 -->
                            <tr class="hover:bg-light-1/50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="project-1" class="h-4 w-4 text-primary border-light-3 rounded focus:ring-primary">
                                        <label for="project-1" class="sr-only">选择项目1</label>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
                                            <i class="fa fa-video-camera text-primary"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-dark">超市商品识别系统</div>
                                            <div class="text-xs text-dark-2">ID: PRJ-20230512-0004</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                        图像分类
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">李小明</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">李小明</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">2023-06-15 14:30</div>
                                    <div class="text-xs text-warning">剩余27天</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">850MB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">
                                        已删除
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-4">恢复</button>
                                    <button class="text-danger hover:text-danger/80">永久删除</button>
                                </td>
                            </tr>
                            
                            <!-- 项目2 -->
                            <tr class="hover:bg-light-1/50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="project-2" class="h-4 w-4 text-primary border-light-3 rounded focus:ring-primary">
                                        <label for="project-2" class="sr-only">选择项目2</label>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
                                            <i class="fa fa-car text-primary"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-dark">停车场管理系统</div>
                                            <div class="text-xs text-dark-2">ID: PRJ-20230428-0009</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary/10 text-primary">
                                        目标检测
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">王工程师</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">张工程师</div>
                                    <div class="text-xs text-dark-2">系统管理员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">2023-06-10 09:15</div>
                                    <div class="text-xs text-warning">剩余22天</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">1.2GB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">
                                        已删除
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-4">恢复</button>
                                    <button class="text-danger hover:text-danger/80">永久删除</button>
                                </td>
                            </tr>
                            
                            <!-- 项目3 -->
                            <tr class="hover:bg-light-1/50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="project-3" class="h-4 w-4 text-primary border-light-3 rounded focus:ring-primary">
                                        <label for="project-3" class="sr-only">选择项目3</label>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
                                            <i class="fa fa-industry text-primary"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-dark">零件缺陷检测系统</div>
                                            <div class="text-xs text-dark-2">ID: PRJ-20230415-0012</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-secondary/10 text-secondary">
                                        实例分割
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">赵技术员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">赵技术员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">2023-06-05 16:45</div>
                                    <div class="text-xs text-warning">剩余17天</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">920MB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">
                                        已删除
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-4">恢复</button>
                                    <button class="text-danger hover:text-danger/80">永久删除</button>
                                </td>
                            </tr>
                            
                            <!-- 项目4 -->
                            <tr class="hover:bg-light-1/50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="project-4" class="h-4 w-4 text-primary border-light-3 rounded focus:ring-primary">
                                        <label for="project-4" class="sr-only">选择项目4</label>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
                                            <i class="fa fa-heartbeat text-primary"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-dark">医学影像辅助诊断</div>
                                            <div class="text-xs text-dark-2">ID: PRJ-20230330-0007</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-secondary/10 text-secondary">
                                        语义分割
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">陈医生</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">系统自动</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">2023-06-01 00:00</div>
                                    <div class="text-xs text-warning">剩余13天</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">1.8GB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">
                                        已删除
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-4">恢复</button>
                                    <button class="text-danger hover:text-danger/80">永久删除</button>
                                </td>
                            </tr>
                            
                            <!-- 项目5 -->
                            <tr class="hover:bg-light-1/50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="project-5" class="h-4 w-4 text-primary border-light-3 rounded focus:ring-primary">
                                        <label for="project-5" class="sr-only">选择项目5</label>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
                                            <i class="fa fa-road text-primary"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-dark">道路场景分析系统</div>
                                            <div class="text-xs text-dark-2">ID: PRJ-20230315-0015</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-secondary/10 text-secondary">
                                        语义分割
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">刘研究员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">刘研究员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">2023-05-20 11:20</div>
                                    <div class="text-xs text-danger">剩余2天</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-dark">800MB</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger">
                                        即将删除
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-4">恢复</button>
                                    <button class="text-danger hover:text-danger/80">永久删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页和批量操作 -->
                <div class="px-6 py-4 flex items-center justify-between border-t border-light-2 bg-white">
                    <div class="flex-1 flex justify-between sm:hidden">
                        <button class="relative inline-flex items-center px-4 py-2 border border-light-2 text-sm font-medium rounded-md text-dark-2 bg-white hover:bg-light-1 transition-all-300">
                            上一页
                        </button>
                        <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-light-2 text-sm font-medium rounded-md text-dark-2 bg-white hover:bg-light-1 transition-all-300">
                            下一页
                        </button>
                    </div>
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-dark-2">
                                显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">8</span> 条结果
                            </p>
                        </div>
                        <div class="flex items-center">
                            <button class="mr-3 px-3 py-1 border border-light-2 rounded-lg text-sm font-medium text-dark-2 bg-white hover:bg-light-1 transition-all-300">
                                批量恢复
                            </button>
                            <button class="mr-6 px-3 py-1 border border-danger rounded-lg text-sm font-medium text-danger bg-white hover:bg-danger/5 transition-all-300">
                                批量永久删除
                            </button>
                            <div class="flex items-center space-x-1">
                                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300 disabled:opacity-50 disabled:hover:border-light-2 disabled:hover:text-dark-2" disabled>
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-primary bg-primary text-white">1</button>
                                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300">2</button>
                                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 回收站使用情况统计 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 存储使用情况卡片 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-sm font-medium text-dark-2">存储使用情况</h3>
                            <p class="text-2xl font-bold text-dark mt-1">5.6GB / 20GB</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-database text-primary"></i>
                        </div>
                    </div>
                    <div class="w-full bg-light-2 rounded-full h-2.5">
                        <div class="bg-primary h-2.5 rounded-full" style="width: 28%"></div>
                    </div>
                    <p class="text-xs text-dark-2 mt-2">已使用 28% 的回收站存储空间</p>
                </div>
                
                <!-- 项目数量统计卡片 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-sm font-medium text-dark-2">回收站项目数量</h3>
                            <p class="text-2xl font-bold text-dark mt-1">8 个项目</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center">
                            <i class="fa fa-folder-open-o text-warning"></i>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-2 mt-4">
                        <div class="bg-light-1 rounded-lg p-2">
                            <p class="text-xs text-dark-2">目标检测</p>
                            <p class="text-lg font-bold text-dark">3</p>
                        </div>
                        <div class="bg-light-1 rounded-lg p-2">
                            <p class="text-xs text-dark-2">图像分类</p>
                            <p class="text-lg font-bold text-dark">2</p>
                        </div>
                        <div class="bg-light-1 rounded-lg p-2">
                            <p class="text-xs text-dark-2">语义分割</p>
                            <p class="text-lg font-bold text-dark">2</p>
                        </div>
                        <div class="bg-light-1 rounded-lg p-2">
                            <p class="text-xs text-dark-2">实例分割</p>
                            <p class="text-lg font-bold text-dark">1</p>
                        </div>
                    </div>
                </div>
                
                <!-- 即将过期项目卡片 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h3 class="text-sm font-medium text-dark-2">即将过期项目</h3>
                            <p class="text-2xl font-bold text-dark mt-1">2 个项目</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center">
                            <i class="fa fa-clock-o text-danger"></i>
                        </div>
                    </div>
                    <div class="space-y-3 mt-4">
                        <div class="flex items-center justify-between bg-light-1 rounded-lg p-3">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-md bg-danger/10 flex items-center justify-center">
                                    <i class="fa fa-road text-danger text-sm"></i>
                                </div>
                                <div class="ml-2">
                                    <p class="text-sm font-medium text-dark">道路场景分析系统</p>
                                    <p class="text-xs text-danger">剩余2天</p>
                                </div>
                            </div>
                            <button class="text-xs text-primary hover:underline">恢复</button>
                        </div>
                        <div class="flex items-center justify-between bg-light-1 rounded-lg p-3">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-md bg-danger/10 flex items-center justify-center">
                                    <i class="fa fa-graduation-cap text-danger text-sm"></i>
                                </div>
                                <div class="ml-2">
                                    <p class="text-sm font-medium text-dark">行人重识别系统</p>
                                    <p class="text-xs text-danger">剩余1天</p>
                                </div>
                            </div>
                            <button class="text-xs text-primary hover:underline">恢复</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 清空回收站确认对话框 -->
    <div id="empty-recycle-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl w-full max-w-md p-6">
            <div class="text-center mb-4">
                <div class="w-16 h-16 mx-auto rounded-full bg-danger/10 flex items-center justify-center mb-4">
                    <i class="fa fa-exclamation-triangle text-danger text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-dark mb-2">确认清空回收站？</h3>
                <p class="text-dark-2">此操作将永久删除回收站中的所有项目，且无法恢复。</p>
            </div>
            <div class="flex space-x-3 mt-6">
                <button id="cancel-empty" class="flex-1 py-2 border border-light-2 rounded-lg hover:bg-light-1 transition-all-300 font-medium">
                    取消
                </button>
                <button id="confirm-empty" class="flex-1 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-all-300 font-medium">
                    确认清空
                </button>
            </div>
        </div>
    </div>
    
    <!-- 永久删除确认对话框 -->
    <div id="permanent-delete-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl w-full max-w-md p-6">
            <div class="text-center mb-4">
                <div class="w-16 h-16 mx-auto rounded-full bg-danger/10 flex items-center justify-center mb-4">
                    <i class="fa fa-trash text-danger text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold text-dark mb-2">确认永久删除？</h3>
                <p class="text-dark-2">此操作将永久删除选中的项目，且无法恢复。</p>
            </div>
            <div class="flex space-x-3 mt-6">
                <button id="cancel-delete" class="flex-1 py-2 border border-light-2 rounded-lg hover:bg-light-1 transition-all-300 font-medium">
                    取消
                </button>
                <button id="confirm-delete" class="flex-1 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-all-300 font-medium">
                    永久删除
                </button>
            </div>
        </div>
    </div>
    
    <!-- 角色切换功能 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const roleSelector = document.getElementById('role-selector');
            
            // 初始化页面元素显示
            updateRoleVisibility(roleSelector.value);
            
            // 角色切换事件
            roleSelector.addEventListener('change', function() {
                updateRoleVisibility(this.value);
            });
            
            // 更新角色相关元素的显示
            function updateRoleVisibility(role) {
                // 隐藏所有角色相关元素
                document.querySelectorAll('.team-admin, .sys-admin').forEach(el => {
                    el.classList.add('hidden');
                });
                
                // 显示对应角色的元素
                if (role === 'team-admin') {
                    document.querySelectorAll('.team-admin').forEach(el => {
                        el.classList.remove('hidden');
                    });
                } else if (role === 'sys-admin') {
                    document.querySelectorAll('.team-admin, .sys-admin').forEach(el => {
                        el.classList.remove('hidden');
                    });
                }
            }
        });
    </script>
    
    <!-- 侧边栏切换 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const sidebar = document.getElementById('sidebar');
            
            sidebarToggle.addEventListener('click', function() {
                sidebar.classList.toggle('hidden');
                sidebar.classList.toggle('absolute');
                sidebar.classList.toggle('inset-y-0');
                sidebar.classList.toggle('left-0');
                sidebar.classList.toggle('z-50');
            });
        });
    </script>
    
    <!-- 回收站功能脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 清空回收站相关
            const emptyRecycleBtn = document.getElementById('empty-recycle-btn');
            const emptyRecycleModal = document.getElementById('empty-recycle-modal');
            const cancelEmptyBtn = document.getElementById('cancel-empty');
            const confirmEmptyBtn = document.getElementById('confirm-empty');
            
            // 永久删除相关
            const permanentDeleteModal = document.getElementById('permanent-delete-modal');
            const cancelDeleteBtn = document.getElementById('cancel-delete');
            const confirmDeleteBtn = document.getElementById('confirm-delete');
            const permanentDeleteButtons = document.querySelectorAll('.text-danger:not(#empty-recycle-btn):not(#confirm-empty):not(#confirm-delete)');
            const batchDeleteBtn = document.querySelector('.mr-6.px-3.py-1');
            
            // 全选功能
            const selectAllCheckbox = document.getElementById('select-all');
            const projectCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');
            
            // 显示清空回收站对话框
            emptyRecycleBtn.addEventListener('click', function() {
                emptyRecycleModal.classList.remove('hidden');
            });
            
            // 关闭清空回收站对话框
            cancelEmptyBtn.addEventListener('click', function() {
                emptyRecycleModal.classList.add('hidden');
            });
            
            // 确认清空回收站
            confirmEmptyBtn.addEventListener('click', function() {
                emptyRecycleModal.classList.add('hidden');
                // 这里可以添加清空回收站的逻辑
                alert('回收站已清空');
            });
            
            // 显示永久删除对话框（单个项目）
            permanentDeleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    permanentDeleteModal.classList.remove('hidden');
                });
            });
            
            // 显示永久删除对话框（批量删除）
            batchDeleteBtn.addEventListener('click', function() {
                const selectedCount = document.querySelectorAll('tbody input[type="checkbox"]:checked').length;
                if (selectedCount > 0) {
                    permanentDeleteModal.classList.remove('hidden');
                } else {
                    alert('请至少选择一个项目');
                }
            });
            
            // 关闭永久删除对话框
            cancelDeleteBtn.addEventListener('click', function() {
                permanentDeleteModal.classList.add('hidden');
            });
            
            // 确认永久删除
            confirmDeleteBtn.addEventListener('click', function() {
                permanentDeleteModal.classList.add('hidden');
                // 这里可以添加永久删除的逻辑
                alert('项目已永久删除');
            });
            
            // 全选/取消全选
            selectAllCheckbox.addEventListener('change', function() {
                projectCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
            
            // 点击模态框背景关闭对话框
            emptyRecycleModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.add('hidden');
                }
            });
            
            permanentDeleteModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.add('hidden');
                }
            });
        });
    </script>
</body>
</html>